<template>
  <div>
    <div class="box" v-for="v in listData" :key="v.id">
      <img :src="v.scene_pic_url" alt="" width="100%" />
      <div class="title">{{ v.subtitle }}</div>
      <div class="tip">{{ v.title }}</div>
      <div class="price">{{ v.price_info | fun_qian }} </div>
    </div>
    <van-pagination
      v-model="currentPage"
      :total-items="20"
      :show-page-size="0"
      force-ellipses
      @change="changepage()"
    />
  </div>
</template>

<script>
import { GetSubjectData } from "@/request/api";
export default {
  data() {
    return {
      currentPage: "1",
      listData: [],
    };
  },
  methods: {
    changepage() {
      GetSubjectData({ page: this.currentPage }).then((res) => {
        // console.log(res);
        this.listData = res.data.data;
        // console.log(this.listData);
      });
      document.documentElement.scrollTop = 0;
    },
  },
   filters: {
    fun_qian(v) {
      let num = v.toFixed(2);
      return "￥" + num + "元";
    },
  },
  components: {},
  created() {
    GetSubjectData().then((res) => {
      // console.log(res);
      this.listData = res.data.data;
      // console.log(this.listData);
    });
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0.2rem;
  padding-bottom: 0.15rem;
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0.15rem;
  }
  .tip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0.15rem;
  }
  .price {
    color: #8b0000;
  }
}
</style>
